<template>
  <div class="restConfig wfull">
    <a-form-model ref="form" :model="form" :rules="rules" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
      <a-form-model-item label="推送类型" prop="pushType">
        <ZgRadio v-model="form.pushType" :options="pushTypeArr" />
      </a-form-model-item>
      <a-form-model-item label="接口url" prop="url">
        <ZgInput v-model="form.url"></ZgInput>
      </a-form-model-item>
      <template v-if="form.pushType == 'default'">
        <a-form-model-item label="HTTP方法">
          <ZgRadio v-model="form.httpMethod" :options="httpMethodArr" />
        </a-form-model-item>
        <a-form-model-item label="请求头JSON" prop="headers">
          <ZgTextarea v-model="form.headers" />
        </a-form-model-item>
        <a-form-model-item label="请求参数模板" prop="requestTemplate">
          <ZgTextarea v-model="form.requestTemplate" />
        </a-form-model-item>
      </template>
      <template v-else>
        <a-form-model-item label="处理器类名">
          <ZgInput v-model="form.handlerClass" />
        </a-form-model-item>
        <a-form-model-item label="处理器方法">
          <ZgInput v-model="form.handlerMethod" />
        </a-form-model-item>
      </template>
    </a-form-model>
  </div>
</template>
<script>
export default {
  props: {
    codeTableInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        id: undefined,
        pushType: 'default',
        url: '',
        httpMethod: 'get',
        headers: undefined,
        requestTemplate: undefined,
        handlerClass: undefined,
        handlerMethod: undefined
      },
      rules: {
        pushType: [{ required: true, message: '请选择推送类型', trigger: 'change' }],
        url: [
          { message: '请输入接口url', trigger: 'change' },
          {
            validator: this.validateUrl,
            trigger: 'change'
          }
        ],
        headers: [
          { message: '请输入请求头', trigger: 'change' },
          {
            validator: this.validateJson,
            trigger: 'change'
          }
        ],
        requestTemplate: [
          { message: '请输入请求头', trigger: 'change' },
          {
            validator: this.validateJson,
            trigger: 'change'
          }
        ]
      },
      pushTypeArr: [
        { label: '默认', value: 'default' },
        {
          label: '自定义',
          value: 'custom'
        }
      ],
      httpMethodArr: [
        { label: 'GET', value: 'get' },
        { label: 'POST', value: 'post' }
      ],
      // 网关前缀
      gateWayPrefix: '/zg-datapush'
    }
  },
  components: {},
  computed: {},
  methods: {
    // url地址校验
    validateUrl(rule, value, callback) {
      if (value) {
        const urlPattern =
          /^https?:\/\/(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(?::\d+)?(?:\/[^\s]*)?$|^https?:\/\/(\d{1,3}\.){3}\d{1,3}(?::\d+)?(?:\/[^\s]*)?$/
        if (!urlPattern.test(value)) {
          callback(new Error('请输入正确的URL格式'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
    // json校验
    validateJson(rule, value, callback) {
      if (value) {
        try {
          JSON.parse(value)
          callback()
        } catch (error) {
          callback(new Error('请输入有效的JSON格式'))
        }
      } else callback()
    },
    save() {
      const { $refs, $http, gateWayPrefix, codeTableInfo, form } = this
      return new Promise((resolve) => {
        $refs.form.validate((valid) => {
          if (valid) {
            $http.post(
              `${gateWayPrefix}/datapush/interfaceConfig/${form.id ? 'update' : 'add'}`,
              Object.assign({ taskId: codeTableInfo.id }, { ...form }),
              () => {
                this.$message.success('保存成功')
                resolve()
              }
            )
          }
        })
      })
    },
    // 查询接口配置
    getConfigInfo() {
      const { $http, gateWayPrefix, codeTableInfo } = this
      $http.post(`${gateWayPrefix}/datapush/interfaceConfig/get`, { taskId: codeTableInfo.id }, (data) => {
        Object.keys(this.form).forEach((key) => {
          this.form[key] = data[key]
        })
        this.form['id'] = data.id
      })
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang="less" scoped></style>
